import React, { useEffect, useRef, useState } from 'react';
import Danmaku from 'rc-danmaku'; // 导入第三方弹幕库

// 弹幕测试组件
const TestDanmaku: React.FC = () => {
  // 使用useRef创建一个引用，用于保存弹幕实例
  // 这样可以在组件重新渲染时保持弹幕实例的引用
  const danmakuInsRef = useRef<Danmaku | null>(null);

  // 使用useState创建一个状态，用于保存输入框的值
  const [inputValue, setInputValue] = useState('');

  // useEffect副作用钩子，在组件挂载时执行
  useEffect(() => {
    // 初始化弹幕实例，传入CSS选择器指定弹幕容器
    const danmakuIns = new Danmaku('.danmaku-wrapper');
    // 将弹幕实例保存到ref中
    danmakuInsRef.current = danmakuIns;

    // 返回一个清理函数，在组件卸载时执行
    return () => {
      // 如果弹幕实例存在，则销毁它
      if (danmakuInsRef.current) {
        danmakuInsRef.current.destroy();
      }
    };
  }, []); // 空依赖数组表示这个effect只在组件挂载时运行一次

  /**
   * 生成随机颜色
   * @returns {string} 返回一个随机的十六进制颜色值
   */
  const getRandomColor = () => {
    // 预定义的六种颜色数组
    const colors = [
      '#ff4d4f', // 红色
      '#1890ff', // 蓝色
      '#52c41a', // 绿色
      '#faad14', // 黄色
      '#722ed1', // 紫色
      '#13c2c2'  // 青色
    ];
    // 随机返回数组中的一个颜色
    return colors[Math.floor(Math.random() * colors.length)];
  };

  /**
   * 处理发送弹幕的逻辑
   */
  const handleSendDanmaku = () => {
    // 检查弹幕实例是否存在且输入内容不为空
    if (danmakuInsRef.current && inputValue.trim()) {
      // 获取随机颜色
      const color = getRandomColor();

      // 创建带样式的HTML字符串
      // 这里设置了颜色、字体大小、文字阴影等样式
      const styledDanmaku = `
        <span style="
          color: ${color};
          font-size: 20px;
          text-shadow: 0 0 2px ${color}; // 文字阴影增强可读性
          display: inline-block;
          padding: 0 5px; // 左右内边距
        ">
          ${inputValue}
        </span>
      `;

      // 将带样式的弹幕推送到弹幕实例中
      danmakuInsRef.current.push(styledDanmaku);
      // 清空输入框
      setInputValue('');
    }
  };

  /**
   * 处理键盘按下事件
   * @param {React.KeyboardEvent} e 键盘事件对象
   */
  const handleKeyDown = (e: React.KeyboardEvent) => {
    // 如果按下的是回车键，则发送弹幕
    if (e.key === 'Enter') {
      handleSendDanmaku();
    }
  };

  // 组件渲染部分
  return (
    <div className="test-danmaku">
      {/* 弹幕显示容器 */}
      <div
        className="danmaku-wrapper" // 这个类名用于弹幕库初始化
        style={{
          width: '300px',       // 固定宽度
          height: '200px',       // 固定高度
          backgroundColor: '#000', // 黑色背景
          marginBottom: '10px',   // 底部外边距
        }}
      />
      {/* 输入控制区域 */}
      <div style={{ display: 'flex', gap: '8px' }}>
        {/* 弹幕输入框 */}
        <input
          type="text"
          value={inputValue} // 绑定状态值
          onChange={(e) => setInputValue(e.target.value)} // 输入变化时更新状态
          onKeyDown={handleKeyDown} // 监听键盘事件
          placeholder="输入弹幕内容" // 占位文本
          style={{
            flex: 1,               // 弹性增长填满剩余空间
            padding: '8px',        // 内边距
            borderRadius: '4px',   // 圆角边框
            border: '1px solid #ccc', // 边框样式
          }}
        />
        {/* 发送按钮 */}
        <button
          type="button"
          onClick={handleSendDanmaku} // 点击时发送弹幕
          style={{
            padding: '8px 16px',    // 内边距
            backgroundColor: '#1890ff', // 蓝色背景
            color: 'white',         // 白色文字
            border: 'none',          // 无边框
            borderRadius: '4px',     // 圆角
            cursor: 'pointer',      // 鼠标指针样式
          }}
        >
          发送弹幕
        </button>
      </div>
    </div>
  );
};

export default TestDanmaku;